<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1"
          charset="utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta charset="UTF-8">
    <title>被扫支付</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>

<div style="float: left">
    <div>

    </div>
    <iframe id="model" name="model" src="index.html" height="540" width="337" scrolling="yes" allowtransparency="yes"
            frameBorder=1>

    </iframe>
    <br/>
    <a href="/">首页</a>
    <button class="qrcode" qrcodeType="1">就诊码</button>
    <button class="qrcode" qrcodeType="2">动态码</button>
    <button class="qrcode" qrcodeType="3">支付码</button>
</div>
<div style="float: left">
    <h1>被扫支付</h1>
    <form id="payform">
        <table>
            <thead>
            <tr>
                <td>描述</td>
                <td>字段</td>
                <td>值</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>商户编码</td>
                <td>bizCode</td>
                <td><input name="bizCode"></td>
            </tr>
            <tr>
                <td>商户交易号</td>
                <td>outTradeNo</td>
                <td><input name="outTradeNo"></td>
            <tr>
                <td>电子健康卡id</td>
                <td>vuid</td>
                <td><input name="vuid"></td>
            </tr>
            <tr>
                <td>订单名称</td>
                <td>title</td>
                <td><input name="title"></td>
            </tr>
            <tr>
                <td>订单描述</td>
                <td>desc</td>
                <td><input name="desc"></td>
            </tr>
            <tr>
                <td>订单金额</td>
                <td>amount</td>
                <td><input name="amount"></td>
            </tr>
            <tr>
                <td>有效时间</td>
                <td>lessTime</td>
                <td><input name="lessTime" value="30"></td>
            </tr>
            <tr>
                <td>订单详情</td>
                <td>detail</td>
                <td><button id="detailadd" type="button">+</button><button id="detailsub" type="button">-</button></td>
            </tr>
            </tbody>
        </table>
        <div>
            <button id="paybtn" type="button">点击提交</button>
        </div>
        <div>
           结果展示 <textarea id="getinfotext" rows="5" cols="40"></textarea>
        </div>
    </form>
</div>
<style>
    #desc table{
        border-collapse: collapse;
    }
    #desc tbody tr{
        border: 1px solid #666;
    }
</style>
<div id="desc" style="float: left">
    订单详情
    <table>
        <thead>
        <tr>
            <td>名称 name</td>
            <td>单价 price</td>
            <td>总金额 amount </td>
            <td>数量 nums </td>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<script>
    $(function () {
        var H5 = JSON.parse(localStorage.getItem("config")).authHost+"/h5/";
        var accessToken = "accessToken=" + localStorage.getItem("accessToken")
        $("#model").attr("src", H5 + "personCenter?" + accessToken)
        $(".qrcode").click(function () {
            $("#model").attr("src", H5 + "qrcode?" + accessToken + "&qrcodeType=" + $(this).attr("qrcodeType"))
        });
        $("#paybtn").click(function () {
            var json = formmap("#payform");
            var parm = {}
            parm.url = "/createOrder"

            debugger
            var detail=[];
            $("#desc tbody").find("tr").each(function (i,v) {
                var o={}
                $(v).find("input").each(function(j,k){
                    var name=$(k).attr("name");
                    o[name]=$(k).val();
                })
                detail.push(o)
            })
            json.detail=detail;
            parm.data = JSON.stringify(json);
            ajax(parm, function (d) {
                $("#getinfotext").val(JSON.stringify(d))
                try {
                    $("#model").attr("src", d.rsp.payUrl+"?" + accessToken)
                }catch (e) {
                    alert(d.msg)

                }
            })


        })
        $("#detailadd").click(function () {
            $("#desc tbody").append(tr())
        });
        $("#detailsub").click(function () {
            $("#desc tbody tr:last-child").remove()
        });
    })
function tr(){
    var html="<tr >\n" +
        "            <td><input name=\"name\"></td>\n" +
        "            <td><input name=\"price\" type=\"number\"></td>\n" +
        "            <td><input name=\"amount\" type=\"number\"></td>\n" +
        "            <td><input name=\"nums\" type=\"number\"></td>\n" +
        "        </tr>"
    return html;
}
    /**
     * ajax 分装
     * @param d 传入参数
     * @param a 回调函数
     */
    function ajax(parm, a) {
        parm.type = "post";
        parm.dataType = 'JSON';
        parm.async = false;
        parm.success = a;
        parm.contentType = "application/json"
        $.ajax(parm);
    }

    /**
     * form转换为json
     * @param dom
     */
    function formmap(dom) {
        var o = {};
        var a = $(dom).serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                if(this.value){
                    o[this.name].push(this.value);
                }
            } else {
                if(this.value) {
                    o[this.name] = this.value || '';
                }
            }
        });
        return o;
    }
</script>
</body>
</html>